<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/plugins/echart/echarts.common.min.js"></script>
    <!--当前也使用的easyUI的主题-->
    <link rel="stylesheet" type="text/css" href="static/plugins/easyui/themes/default/easyui.css"/>
    <!--easyUI的图标样式-->
    <link rel="stylesheet" type="text/css" href="static/plugins/easyui/themes/icon.css"/>
    <!--jquery核心库-->
    <script type="text/javascript" src="static/plugins/easyui/jquery.min.js"></script>
    <!--easyUI的核心库-->
    <script type="text/javascript" src="static/plugins/easyui/jquery.easyui.min.js"></script>
    <!--国际化文件-->
    <script type="text/javascript" src="static/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/static/js/vipEchart.js"></script>
</head>
<body>

<table border="1" cellpadding="0" cellspacing="0" style="width: 500px; height: 180px;">
    <tr>
        <td>
            <div style="width: auto;height: auto;">
                <p style="font-size: 14px">销售笔数</p>
                <p style="font-size: 25px" align="center">
                    <span style="color: darksalmon" class="fonts24 colorff">¥
                        <i >0</i>
                    </span>
                </p>
            </div>
        </td>
        <td>
            <div style="width: auto;height: auto">
                <p style="font-size: 14px">销售额</p>
                <p style="font-size: 25px" align="center">
                    <span style="color: darksalmon" class="fonts24 colorff">¥
                        <i id="">0</i>
                    </span>
                </p>
            </div>
        </td>
        <td>
            <div style="width: auto;height: auto">
                <p style="font-size: 14px">毛利</p>
                <p style="font-size: 25px" align="center">
                    <span style="color: darksalmon" class="fonts24 colorff">¥
                        <i id="order_receivable">0</i>
                    </span>
                </p>
            </div>
        </td>
    </tr>
</table>

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '某地区蒸发量和降水量',
            subtext: '纯属虚构'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['蒸发量','降水量'],
            right:'150px'
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'蒸发量',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'降水量',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

<div id="vip_toolbar">
    会员消费时间:<input type="text" id="beginDate" name="beginDate" class="easyui-datebox" prompt="起始时间">----
    <input type="text" id="endDate" name="endDate" class="easyui-datebox" prompt="结束时间">
    <input prompt="会员名字" id="keyword" class="easyui-textbox" type="text">
    <a class="easyui-linkbutton" href="#" iconCls="icon-search" plain="true" data-cmd="searchEmployee">查询</a>
</div>
<div style="height: 600px;width: 800px">
    <table id="vip_datagrid"></table>
</div>


</body>
</html>